<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>与动画效果相关的方法</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('.begin').click(function () {
            //     $('.box').animate({left:'900px'},1000);
            // });
            // $('.end').click(function () {
            //     $('.box').stop();//能立即让动画效果停下来
            // });
//"停止动画效果 stop只停止某一段的动画效果,后面有还继续执行动画效果
//stop参数1 布尔值 默认是false 如果是true就默认后面的动画也执行"

            // $('.begin').click(function () {
            //     $('.box').animate({left:'900px'},1000)
            //         .animate({top:'100px'},1000)
            //         .animate({height:'300px'},1000)
            //         .animate({width:'300px'},1000);
            // });
            // $('.end').click(function () {
            //     $('.box').stop();//能立即让动画效果停下来
            // });
//stop参数1 布尔值 默认是false 如果是true就默认后面的动画也执行"
//   参数2 true 点击stop时执行的当前动画这个时候 会执行完 后续的动画效果不再执行
// stop(clearQueue,gotoEnd)
 //            $('.begin').click(function () {
 //                $('.box').animate({left:'900px'},1000)
 //                    .animate({top:'100px'},1000)
 //                    .animate({height:'300px'},1000)
 //                    .animate({width:'300px'},1000);
 //            });
 //            $('.end').click(function () {
 //                $('.box').stop(true,true);
 //            });
 //            $('.begin').click(function () {
 //                $('.box').animate({left:'900px'},1000).delay(2000)
 //                    .animate({top:'100px'},1000)
 //                    .animate({height:'300px'},1000)
 //                    .animate({width:'300px'},1000);
 //            });
 //            $('.end').click(function () {
 //                $('.box').stop(true,true);
 //            });
//练习题 做一个无线循环的效果 修改其背景颜色
//             $('.begin').click(function () {
//                 $('.box').slideToggle('slow',function test() {
//                     $(this).slideToggle('slow',arguments.callee); //test也可以写arguments.callee返回正被执行的 Function 对象
//                 });
//             });
//             $('.search').click(function () {
//                 $(':animated').css('background','red');
//             });

            $('.begin').click(function () {
                $('.box').animate({left:'900px'},6000,'linear');//swing有慢变快再变慢   linear匀速
            });

        });
    </script>
</head>
<body>
    <input class="begin" type="button" value="开始">
    <input class="end" type="button" value="结束">
    <input class="search" type="button" value="search">
    <div class="box" style="width: 100px;height: 100px;background-color: #bfa;position: absolute"></div>
    <div style="width: 1px;height: 700px;background-color: black;position: absolute;left:900px;top: 0px"></div>
    <script>
        /*
        *stop(clearQueue,gotoEnd)
        * delay()延时
        *
//练习题  做一个无线循环的效果 修改其背景颜色
      $('.begin').click(function () {
          $('.box').slideToggle('slow',function test() {
              $(this).slideToggle('slow',arguments.callee); //test也可以写arguments.callee返回正被执行的 Function 对象
          });
      });
      $('.search').click(function () {
          $(':animated').css('background','red');
      });
        *
        * */
    </script>
</body>
</html>